Datum- en tijdinvoer

Veel formulieren verzamelen gegevens zoals data, e-mailadressen en URL's. Dit werd vóór HTML 5 gedaan met behulp van tekstvakken. In HTML5 zijn nieuwe formulierelementen geïntroduceerd om de manier waarop soortgelijke gegevens verzameld worden te standaardiseren. Oudere browsers die deze invoermethoden niet herkennen behandelen ze als een gewoon tekstvak.

HTML

<input>

HTML attributen

`type="date"`

Als je de gebruiker om een datum vraagt, dan kun je gebruikmaken van het element <input> en het attribuut type de waarde date geven. Dit zal leiden tot een datum-invoer-vak in browsers die de nieuwe HMTL5-invoer ondersteunen.

Als je die waarden voor het attribuut type gebruikt kan ook nog de volgende attributen in te stellen:

min: geeft het kleinste getal dat in het invoerveld mag komen aan.
max: geeft het grootste getal dat in het invoerveld mag komen aan.
step: geeft aan hoeveel de getallen die in het invoerveld mogen komen moeten verschillen van elkaar. Als bijvoorbeeld step="5" dan mogen alleen de getallen …, -5, 0, 5, 10, … in het veld geplaatst worden.
value: geeft de standaardwaarde van het invoerveld aan.

<div>
    <label>
        Datum <input type="date" name="datum">
    </label>
</div>

`type="month"`

<div>
    <label>
        Maand en jaar <input type="month" name="maand">
    </label>
</div>

`type="week"`

<div>
    <label></label>
        Week <input type="week" name="week-in-jaar">
    </label>
</div>

`type="time"`

<div>
    <label>
        Tijd <input type="time" name="tijd">
    </label>
</div>

`type="datetime-local"`

<div>
    <label>
        Datum en tijd lokaal <input type="datetime-local" name="datum-en-tijd-lokaal">
    </label>
</div>

2016-11-13 15:56:10